{% block sw_settings_listing_index %}
<sw-page class="sw-settings-listing-index">

    {% block sw_settings_listing_search_bar %}
    <template #search-bar>
        <sw-search-bar />
    </template>
    {% endblock %}

    <template #language-switch>
        <sw-language-switch @on-change="onChangeLanguage" />
    </template>

    {% block sw_settings_listing_smart_bar_header %}
    <template #smart-bar-header>
        {% block sw_settings_listing_smart_bar_header_title %}
        <h2>
            {% block sw_settings_listing_smart_bar_header_title_text %}
            {{ $tc('sw-settings.index.title') }}
            <mt-icon
                name="regular-chevron-right-xs"
                size="12px"
            />
            {{ $tc('sw-settings-listing.general.textHeadline') }}
            {% endblock %}

            {% block sw_settings_listing_smart_bar_header_amount %}{% endblock %}
        </h2>
        {% endblock %}
    </template>
    {% endblock %}

    {% block sw_settings_listing_smart_bar_actions %}
    <template #smart-bar-actions>
        {% block sw_settings_listing_actions_save %}
        <sw-button-process
            class="sw-settings-listing__save-action"
            :is-loading="isLoading"
            :process-success="isSaveSuccessful"
            :disabled="isLoading"
            variant="primary"
            @update:process-success="saveFinish"
            @click="onSave"
        >
            {{ $tc('sw-settings-listing.general.buttonSave') }}
        </sw-button-process>
        {% endblock %}
    </template>
    {% endblock %}

    {% block sw_settings_listing_content %}
    <template #content>

        {% block sw_settings_listing_content_card_view %}
        <sw-card-view>
            <template v-if="isLoading">
                <sw-skeleton />
                <sw-skeleton />
            </template>

            {# v-show is used here as underlying components influence the loading state and v-if would destroy this behaviour #}
            <div v-show="!isLoading">
                {% block sw_settings_listing_content_card_view_default_sales_channel %}
                <mt-card
                    class="sw-settings-listing__sales-channel-card"
                    position-identifier="sw-settings-listing-sales-channel"
                    :title="$tc('sw-settings-listing.index.defaultSalesChannel.title')"
                >
                    <sw-settings-listing-default-sales-channel
                        ref="defaultSalesChannelCard"
                        :is-loading="isLoading"
                    />
                </mt-card>
                {% endblock %}

                {% block sw_settings_listing_content_card_view_system_config %}
                <sw-system-config
                    ref="systemConfig"
                    sales-channel-switchable
                    domain="core.listing"
                    @loading-changed="onLoadingChanged"
                >

                    <template #afterElements="{ config, index, isNotDefaultSalesChannel, inheritance }">
                        {% block sw_settings_listing_content_card_view_system_config_default_sorting_select %}
                        <sw-inherit-wrapper
                            v-if="config && index === 0"
                            v-model:value="config['core.listing.defaultSorting']"
                            :label="$tc('sw-settings-listing.general.labelDefaultSorting')"
                            :has-parent="isNotDefaultSalesChannel"
                            :inherited-value="inheritance['core.listing.defaultSorting']"
                            required
                        >
                            <template #content="{ isInherited, currentValue, updateCurrentValue }">
                                <sw-single-select
                                    class="sw-settings-listing-index__default-sorting-select"
                                    :placeholder="$tc('sw-settings-listing.general.placeholderDefaultSorting')"
                                    :disabled="isInherited"
                                    :value="currentValue"
                                    :options="productSortingOptions"
                                    :error="hasDefaultSortingError ? salesChannelDefaultSortingError : null"
                                    label-property="label"
                                    value-property="id"
                                    @update:value="updateCurrentValue"
                                />
                            </template>
                        </sw-inherit-wrapper>
                        {% endblock %}

                        {% block sw_settings_listing_content_card_view_system_config_default_search_result_sorting_select %}
                        <sw-inherit-wrapper
                            v-if="config && index === 0"
                            v-model:value="config['core.listing.defaultSearchResultSorting']"
                            :label="$tc('sw-settings-listing.general.labelDefaultSearchResultSorting')"
                            :has-parent="isNotDefaultSalesChannel"
                            :inherited-value="inheritance['core.listing.defaultSearchResultSorting']"
                            required
                        >
                            <template #content="{ isInherited, currentValue, updateCurrentValue }">
                                <sw-single-select
                                    class="sw-settings-listing-index__default-search-result-sorting-select"
                                    :placeholder="$tc('sw-settings-listing.general.placeholderDefaultSearchResultSorting')"
                                    :disabled="isInherited"
                                    :value="currentValue"
                                    :options="searchResultSortingOptions"
                                    :error="hasDefaultSortingError ? salesChannelDefaultSortingError : null"
                                    label-property="label"
                                    value-property="id"
                                    @update:value="updateCurrentValue"
                                />
                            </template>
                        </sw-inherit-wrapper>
                        {% endblock %}
                    </template>

                </sw-system-config>
                {% endblock %}

                {% block sw_settings_listing_content_card_view_options_card %}
                <mt-card
                    class="sw-settings-listing-index__sorting-options-card"
                    position-identifier="sw-settings-listing-sorting-options"
                    :title="$tc('sw-settings-listing.index.productSorting.title')"
                    :is-loading="isProductSortingOptionsCardLoading"
                >

                    {% block sw_settings_listing_content_card_view_options_card_toolbar %}
                    <template #toolbar>

                        {% block sw_settings_listing_content_card_view_options_card_toolbar_container %}
                        <sw-container
                            columns="1fr auto"
                            gap="0 10px"
                            align="start"
                        >

                            {% block sw_settings_listing_content_card_view_options_card_toolbar_search_field %}
                            <sw-simple-search-field
                                v-model:value="productSortingOptionsSearchTerm"
                                variant="form"
                                size="small"
                                class="sw-settings-listing-index__sorting-options-search-field"
                                @search-term-change="onSearchProductSortingOptions"
                            />
                            {% endblock %}

                            {% block sw_settings_listing_content_card_view_options_card_toolbar_add_product_option %}
                            <mt-button
                                ghost
                                size="small"
                                variant="secondary"
                                @click="onAddNewProductSortingOption"
                            >
                                {{ $tc('sw-settings-listing.index.productSorting.addButton') }}
                            </mt-button>
                            {% endblock %}
                        </sw-container>
                        {% endblock %}
                    </template>
                    {% endblock %}

                    {% block sw_settings_listing_content_card_view_options_card_grid %}
                    <sw-data-grid
                        v-if="productSortingOptions.length > 0"
                        :compact-mode="false"
                        :columns="productSortingOptionColumns"
                        :data-source="productSortingOptions"
                        allow-inline-edit
                        plain-appearance
                        :show-selection="false"
                        :is-record-editable="item => !item.locked"
                        @inline-edit-save="onSaveProductSortingOptionInlineEdit"
                    >

                        {% block sw_settings_listing_content_card_view_options_card_grid_column_criteria %}
                        <template #column-criteria="{item}">

                            {% block sw_settings_listing_content_card_view_options_card_grid_column_criteria_text %}
                            <span
                                class="is--truncate"
                                :title="formatProductSortingOptionField(item.fields)"
                            >
                                {{ formatProductSortingOptionField(item.fields) }}
                            </span>
                            {% endblock %}
                        </template>
                        {% endblock %}

                        {% block sw_settings_listing_content_card_view_options_card_grid_column_actions %}
                        <template #actions="{item}">

                            {% block sw_settings_listing_content_card_view_options_card_grid_column_actions_edit %}
                            <sw-context-menu-item
                                :disabled="item.locked"
                                @click="onEditProductSortingOption(item.id)"
                            >
                                {{ $tc('global.default.edit') }}
                            </sw-context-menu-item>
                            {% endblock %}

                            {% block sw_settings_listing_content_card_view_options_card_grid_column_actions_delete %}
                            <sw-context-menu-item
                                variant="danger"
                                :disabled="item.locked || isItemDefaultSorting(item.id)"
                                @click="toBeDeletedProductSortingOption = item"
                            >
                                {{ $tc('global.default.delete') }}
                            </sw-context-menu-item>
                            {% endblock %}
                        </template>
                        {% endblock %}

                        {% block sw_settings_listing_content_card_view_options_card_grid_pagination %}
                        <template #pagination>
                            <sw-pagination
                                :page="sortingOptionsGridPage"
                                :total="sortingOptionsGridTotal"
                                :limit="sortingOptionsGridLimit"
                                :steps="[10]"
                                @page-change="onPageChange"
                            />
                        </template>
                        {% endblock %}
                    </sw-data-grid>
                    {% endblock %}

                    {% block sw_settings_listing_content_card_view_options_card_empty_state %}
                    <sw-empty-state
                        v-else
                        class="sw-settings-listing-index__sorting-options-empty-state"
                        :title="$tc('sw-settings-listing.index.productSorting.emptyState.title')"
                        :subline="$tc('sw-settings-listing.index.productSorting.emptyState.subline')"
                        :absolute="false"
                    >

                        {% block sw_settings_listing_content_card_view_options_card_empty_state_icon %}
                        <template #icon>
                            <img
                                :src="assetFilter('administration/administration/static/img/empty-states/settings-empty-state.svg')"
                                :alt="$tc('sw-settings-listing.index.productSorting.emptyState.title')"
                            >
                        </template>
                        {% endblock %}
                    </sw-empty-state>
                    {% endblock %}
                </mt-card>
                {% endblock %}
            </div>
        </sw-card-view>
        {% endblock %}

        {% block sw_settings_listing_content_card_view_options_delete_modal %}
        <sw-settings-listing-delete-modal
            v-if="toBeDeletedProductSortingOption"
            :title="$tc('sw-settings-listing.index.deleteModal.title')"
            :description="$t('sw-settings-listing.index.deleteModal.description', {
                'sortingOptionName': toBeDeletedProductSortingOption.label
            })"
            @cancel="toBeDeletedProductSortingOption = null"
            @delete="onDeleteProductSorting(toBeDeletedProductSortingOption)"
        />
        {% endblock %}
    </template>
    {% endblock %}
</sw-page>
{% endblock %}
